<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background}">
		<uni-nav-bar fixed left-icon="left" title="排行榜" @clickLeft="back" />
		<scroll-view :scroll-y="true" :style="{'height':scroll_height+'px'}">
			<view style="margin-left: 40rpx;">
				<uni-data-checkbox mode="tag" v-model="query.gender" :localdata="channels" @change="genderChange">
				</uni-data-checkbox>
				<uni-data-checkbox mode="tag" v-model="query.cate" :localdata="cate" @change="cateChange">
				</uni-data-checkbox>
				<uni-data-checkbox mode="tag" v-model="query.chapter_lower_num" :localdata="chapterList"
					@change="getList">
				</uni-data-checkbox>
				<uni-data-checkbox mode="tag" v-if="cateNew.length" v-model="query.sedCate" :localdata="cateNew"
					@change="getList">
				</uni-data-checkbox>
				<uni-data-checkbox mode="tag" v-model="query.rank" :localdata="rankVal" @change="getList">
				</uni-data-checkbox>
				<uni-data-checkbox v-if="novelList.length" class="a" mode="button" multiple icon="left" v-model="value"
					:localdata="range" @change="change">
				</uni-data-checkbox>
			</view>
			<view v-if="novelList.length" class="b" style="margin: 30rpx 0;">

			</view>
			<view v-for="(item,index) in novelList" class="item" :key="index" @click="jump(item.title)">
				<view class="left">
					<image class="cover" :src="item.icon" mode="aspectFit"></image>
				</view>

				<view class="right">
					<view class="name">
						<view class="tag" v-if="index<=2">
							{{index+1}}
						</view>
						<text v-else>{{index+1}}.</text>
						{{item.title}}
					</view>

					<view class="author">
						{{item.status}} | {{item.author}}
					</view>
					<view class="description">
						<text>{{item.hh_hot}}人搜索</text>
						<text>{{item.mark_score}}分</text>
					</view>
				</view>

			</view>

		</scroll-view>
	</view>
</template>

<script>
	import request from "../../utils/request.js"
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		data() {
			return {
				query: {
					method: 'Novelnew.home',
					format: 'json',
					schema: 'v2',
					gender: 'male',
					cate: '全部',
					chapter_lower_num: '全部',
					sedCate: '全部',
					rank: 'rank_hot',
					is_finish: false,
					is_high_score: false
				},
				channels: [],
				list: [],
				rankVal: [],
				cate: [],
				cateNew: [],
				chapterList: [],
				novelList: [],
				scroll_height: 0,
				range: [{
						text: '高分',
						value: 1
					},
					{
						text: '完结',
						value: 2
					},
				],
				value: []
			};
		},
		onLoad() {
			this.scroll_height = getApp().globalData.screenHeight - 44 - 0 * parseInt(RpxToPx(20)) - getApp()
				.globalData.statusBarHeight
			request('https://quark.sm.cn/api/rest', 'GET', this.query).then(res => {
				this.list = res.data.list
				this.novelList = res.data.res.hits.hit.item.novel_list.novel_item
				for (let key in res.data.channels) {
					this.channels.push({
						text: res.data.channels[key],
						value: key
					})
				}
				for (let key in res.data.rankVal) {
					this.rankVal.push({
						value: res.data.rankVal[key],
						text: key
					})
				}
				for (let s of this.list[this.query.gender].cate) {
					this.cate.push({
						text: s,
						value: s
					})
				}
				for (let s of this.list[this.query.gender].chapterList) {
					this.chapterList.push({
						text: s,
						value: s
					})
				}
				let index = this.cate.map(i => i.text).indexOf(this.query.cate)
				for (let s of this.list[this.query.gender].cateNew[index].cateSecond) {
					this.cateNew.push({
						text: s,
						value: s
					})
				}

			})
		},
		onShow() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			jump(name) {
				uni.navigateTo({
					url: "../results/results?keyword=" + name,
				})
			},
			change(e) {
				if (e.detail.value.indexOf(1) > -1) {
					this.query.is_high_score = true
				} else {
					this.query.is_high_score = false
				}

				if (e.detail.value.indexOf(2) > -1) {
					this.query.is_finish = true
				} else {
					this.query.is_finish = false
				}
				this.getList()
			},
			genderChange() {
				this.chapterList = []
				this.cateNew = []
				this.cate = []

				this.query.cate = '全部'
				for (let s of this.list[this.query.gender].cate) {
					this.cate.push({
						text: s,
						value: s
					})
				}
				for (let s of this.list[this.query.gender].chapterList) {
					this.chapterList.push({
						text: s,
						value: s
					})
				}
				let index = this.list[this.query.gender].cateNew.map(i => i.cateFirst).indexOf(this.query.cate)
				for (let s of this.list[this.query.gender].cateNew[index].cateSecond) {
					this.cateNew.push({
						text: s,
						value: s
					})
				}
				this.getList()
			},
			cateChange() {
				this.cateNew = []
				this.query.sedCate = '全部'
				let index = this.list[this.query.gender].cateNew.map(i => i.cateFirst).indexOf(this.query.cate)
				for (let s of this.list[this.query.gender].cateNew[index].cateSecond) {
					this.cateNew.push({
						text: s,
						value: s
					})
				}
				this.getList()
			},
			getList() {
				uni.showLoading({
					mask: true,
					title: "获取数据中.....",
				})
				request('https://quark.sm.cn/api/rest', 'GET', this.query).then(res => {
					this.novelList = res.data.res.hits.hit.item.novel_list.novel_item
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="less">
	.dark.container {
		/deep/.uni-data-checklist .checklist-group .checklist-box .checklist-text {
			color: var(--color-main) !important;
		}

		/deep/.uni-nav-bar-text {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}
	}

	.container {
		background: var(--background);

		/deep/.uni-data-checklist .checklist-group .checklist-box.is-checked .checklist-text {
			border: none !important;
			color: #35a9fc !important;
		}

		/deep/.checklist-box.uni-label-pointer {
			border: none !important;
			border-radius: 999px !important;
			background-color: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
		}

		/deep/.uni-data-checklist .checklist-group .checklist-box {
			padding: 20rpx;
			margin-left: 20rpx;
		}

		/deep/.uni-navbar__header {
			background-color: var(--background) !important;
			border: none;
		}

		/deep/.uni-navbar__content {
			border: none;
		}

		/deep/.checklist-group {
			flex-wrap: nowrap !important;
			overflow-x: scroll !important;
			white-space: nowrap;
			padding: 10rpx 0;

		}


		.item {
			display: flex;
			margin: 40rpx 40rpx;
			margin-top: 0;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: var(--nav_color);
			height: 200rpx;
			box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
			position: relative;

			background-color: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);

			.left {
				width: 150rpx;

				/deep/div {
					background-size: 100% 100% !important;
				}

				.none {
					display: none;
				}

				.cover {
					position: absolute;
					height: 200rpx;
					width: 150rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

				}
			}

			.right {
				padding-left: 30rpx;
				flex: 1;

				.tag {
					display: inline-block;
					padding: 5rpx 15rpx;
					border-radius: 20rpx;
					background-color: #2979ff;
					color: white;
				}

				.name {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bolder;
					padding: 20rpx 0;
				}

				.author {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
				}

				.description {
					width: 100%;
					padding: 20rpx 0;
					font-size: 32rpx;
					display: flex;
					justify-content: space-between;
					color: var(--color-second);
					font-size: 28rpx;
				}
			}
		}

	}
</style>
